<template>
  <div class="goods-detail pad-20 mar-t-10 mar-b-20">
    <div class="detail-content">
      <template v-if="detailsTemplateList && detailsTemplateList.length > 0">
        <div v-for="(item, index) in detailsTemplateList" :key="index">
          <!-- 文章 -->
          <div v-if="item.authorType === 11" :style="'background:' + item.backColor">
            <div class="pad-t-6 pad-b-6" :class="item.sizeStyle + ' ' +
                item.shapeStyle + ' ' +
                item.alignStyle + ' ' +
                item.colorStyle"
              :style="'padding: '+ item.upperLowerMargins+'px '+ item.sideMargin+'px;'">
              <div v-if="item.textDTO.content" class="richArea" v-html="item.textDTO.content" />
            </div>
          </div>
            <!-- 图片 -->
            <div v-if="item.authorType === 12" :style="'background:' + item.backColor">
              <div :style="'padding: '+ item.upperLowerMargins+'px '+ item.sideMargin+'px;'">
                <el-image v-if="item.pictureDTO.imgUrl" class="picture-bar" :src="item.pictureDTO.imgUrl" lazy />
              </div>
            </div>
            <!-- 视频 -->
            <div v-if="item.authorType === 16">
              <video :src="item.componentVideoDTO.videoUrl" :poster="item.componentVideoDTO.videoImg" class="video"
                :class="'video-w-' + item.componentVideoDTO.videoStyle" controls="controls" />
            </div>
        </div>
      </template>      
    </div>
    <!-- 空数据展示 -->
    <div v-if="detailsTemplateList && !detailsTemplateList.length">
      <none-data />
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted,
    inject
  } from 'vue'
  import noneData from '@/components/noneData/index.vue'

  export default defineComponent({
    name: 'GoodsDetail',
    components: {
      noneData
    },
    setup() {
      let detailsTemplateList = inject('detailsTemplateList')

      onMounted(() => {
      })
      return {
        detailsTemplateList
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  $detailWidth: 750px;
  $recommendGoodsWidth: 190px;

  .goods-detail {
    .detail-content {
      width: $detailWidth;
      box-sizing: border-box;
      text-align: center;

      .el-image {
        margin-bottom: -4px;
      }

      .video {
        &.video-w-1 {
          width: $detailWidth;
          height: 421px;
        }

        &.video-w-2 {
          width: $detailWidth;
          height: 562px;
        }

        &.video-w-3 {
          width: $detailWidth;
          height: 750px;
        }

        // &.video-w-1{
        //   width: 500px;
        //   height: 218px;
        // }
        // &.video-w-2{
        //   width: 500px;
        //   height: 375px;
        // }
        // &.video-w-3{
        //   width: 500px;
        //   height: 500px;
        // }
      }
    }
  }
</style>
